<template>
  <!-- 菜单 -->
  <div class="box">
    <!--  新增 -->
    <div class="searchFor">
      <el-button
        icon="el-icon-edit"
        size="small"
        type="success"
        @click="openDrawer('add', list.id)"
      >
        添加菜单
      </el-button>
    </div>

    <!-- table 表格数据区域 -->
    <el-table
      :data="list"
      style="min-width: 100%"
      row-key="title"
      default-expand-all
      :tree-props="{ children: 'childs' }"
    >
      <el-table-column prop="title" label="标题" width="200"> </el-table-column>
      <el-table-column prop="code" label="权限点代码" min-width="80">
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <div class="actions">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="openDrawer('edit', row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="del(row.id)"
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table 表格数据区域 -->
    <AddMenu
      ref="addMenu"
      :dialogFormVisible="dialogFormVisible"
      :pid="currentId"
    ></AddMenu>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
// import { transListToTreeData } from '@/utils/index.js'
import AddMenu from '../components/menu-add.vue'

export default {
  components: {
    AddMenu
  },
  data () {
    return {
      list: [{ code: '', title: '' }],
      dialogFormVisible: false,
      currentId: null
    }
  },

  created () {
    this.initTable()
  },

  methods: {
    // 获取table数据
    async initTable () {
      const { data } = await list()
      this.list = data

      console.log(this.list)
    },
    // 添加菜单
    openDrawer (type, id) {
      console.log(type)
      console.log(id)
      if (type === 'add') {
        this.dialogFormVisible = true
        this.currentId = id
      } else if (type === 'edit') {
        this.dialogFormVisible = true // 显示弹层
        this.currentId = id
      }
    },
    // 关闭弹窗
    closeDiaolog () {
      this.dialogFormVisible = false
    },
    // 点击删除图标删除对应的数据
    async del (id) {
      // console.log(id)
      // try {
      //   await remove(id)
      //   this.$message.success('删除成功')
      //   this.initTable()
      // } catch (error) {
      //   this.$message.error('删除失败')
      // }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(async () => {
          await remove(id)
          this.$message.success('删除成功!')
          this.initTable()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang="less">
.box {
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  margin: 20px;
  .searchFor {
    display: flex;
    justify-content: flex-end;
  }
  .el-table {
    width: 100%;
    ::v-deep .el-table__header-wrapper {
      display: flex;
      float: left;
      justify-content: space-between;
      border-bottom: 2px solid #e8e8e8;
      .hidden-columns {
        background-color: #fafafa;
      }
    }
  }
}
</style>
